<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户注册</title>
	<link rel="stylesheet" href="/css/bootstrap.min.css">
<style type="text/css">
.imgclass {
	width: 70px;
	height: 70px;
}
.position{
	margin:0 auto;
	width:20%;
}
</style>
</head>
<body>
	<form action="/user/adduser" method="post"
		enctype="multipart/form-data" class="position">
	  <div class="form-group">
	    <label for="exampleInputEmail1">姓名</label>
	    <input type="text" class="form-control" name="username" id="exampleInputEmail1" placeholder="用户名">
	  </div>
	  <div class="form-group">
	    <label for="exampleInputPassword1">密码</label>
	    <input type="password" class="form-control" name="userpwd" id="exampleInputPassword1" placeholder="密码">
	  </div>
	  <div class="form-group">
	    <label for="exampleInputFile">头像</label>
	    <input type="file" id="exampleInputFile" name="head" type="file" onchange="getImgURL(this)">
	    <span id="showhead"></span></td>
	  </div>
	  <div class="form-group">
	    <button type="submit" class="btn btn-default">注册</button>
	  </div>
	</form>
</body>
<script type="text/javascript" src="/jquery-1.8.0.js"></script>
<script type="text/javascript">

	function getImgURL(node) {
		try {
			var file = null;
			if (node.files && node.files[0]) {
				file = node.files[0];
			} else if (node.files && node.files.item(0)) {
				file = node.files.item(0);
			}
			//Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径  
			try {
				//Firefox7.0   
				imgURL = file.getAsDataURL();
				//alert("//Firefox7.0"+imgRUL);                           
			} catch (e) {
				//Firefox8.0以上                                
				imgRUL = window.URL.createObjectURL(file);
				//alert("//Firefox8.0以上"+imgRUL);  
			}
		} catch (e) { //这里不知道怎么处理了，如果是遨游的话会报这个异常                   
			//支持html5的浏览器,比如高版本的firefox、chrome、ie10  
			if (node.files && node.files[0]) {
				var reader = new FileReader();
				reader.onload = function(e) {
					imgURL = e.target.result;
				};
				reader.readAsDataURL(node.files[0]);
			}
		}
		//imgurl = imgURL;  
		creatImg(imgRUL);
	}

	function creatImg(imgRUL) { //根据指定URL创建一个Img对象  
		var textHtml = "<img src='"+imgRUL+"' class='imgclass'/>";
		$("#showhead").empty();
		$("#showhead").html(textHtml);
	}

</script>
</html>